import PropTypes from 'prop-types'
import React, { memo, useState } from 'react'
import {TabWrapper} from './style'
import ScrollView from '@/base-ui/scroll-view'

const SectionTabs = memo((props) => {
    const {tabNames,tabClick} = props
    
    // 当前下标
    const [currentIndex,setCurrentIndex] = useState(0)
    // 点击item
    const handleClick =(index,item)=>{
        setCurrentIndex(index)
        tabClick(index,item)
    }
  return (
    
    <TabWrapper>
        <ScrollView>
            {
                tabNames?.map((item,index)=>{
                return( 
                <div 
                    className={`item ${index==currentIndex?'active':''}`} 
                    key={item}
                    onClick={()=>{handleClick(index,item)}}
                >
                    {item}
                </div>)
            })
            }
        </ScrollView>
    </TabWrapper>
  )
})

SectionTabs.propTypes = {
    tabNames:PropTypes.array,
    tabClick:PropTypes.func
}

export default SectionTabs
